import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {Link, withRouter} from 'react-router-dom'
import {Menu, Icon} from 'antd'
import {connect} from 'react-redux'


import {setHeadTitle} from '../../redux/actions'
import logo from '../../assets/images/logo.png'
import menuList from '../../config/menuConfig'
import './index.less'

const SubMenu = Menu.SubMenu;


/*
左侧导航的组件
*/
class LeftNav extends Component {


    /*
    判断当前登陆用户对item 是否有权限
    */
    hasAuth = (item) => {
        const {key, isPublic} = item


        const menus = this.props.user.role.menus
        const username = this.props.user.username
        /*
        1.如果当前用户是admin
        2.如果当前item 是公开的
        3.当前用户有此item 的权限: key 有没有menus 中
        */
        if (username === 'admin' || isPublic || menus.indexOf(key) !== -1) {
            return true
        } else if (item.children) { // 4. 如果当前用户有此item 的某个子item 的权限
            return !!item.children.find(child => menus.indexOf(child.key) !== -1)
        }

        return false
    }
    getMenuNodes_map = (menuList) => {
        return menuList.map(item => {
            if (!item.children) {
                return (
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon}/>
                            <span>{item.title}</span>
                        </Link>
                    </Menu.Item>
                )
            } else {
                return (
                    <SubMenu key={item.key}
                             title={
                                 <span>
                                    <Icon type={item.icon}/>
                                    <span>{item.title}</span>
                                 </span>
                             }
                    >
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                )
            }
        })
    }


    /*根据menu 的数据数组生成对应的标签数组
    使用reduce() + 递归调用*/
    getMenuNodes = (menuList) => {
    // 得到当前请求的路由路径
        const path = this.props.location.pathname
    // 如果当前请求的是根路径, 设置头部标题为首页
        if (path === '/') {
            this.props.setHeadTitle('首页')
        }
        return menuList.reduce((pre, item) => {
            // 如果当前用户有item 对应的权限, 才需要显示对应的菜单项
            if (this.hasAuth(item)) {
        // 向pre 添加<Menu.Item>
                if (!item.children) {
        // 一旦请求路径匹配上当前item, 将item 的title 保存到redux
                    if (item.key === path || path.indexOf(item.key) === 0) {
                        this.props.setHeadTitle(item.title)
                    }
                    pre.push((
                        <Menu.Item key={item.key}>
                            <Link to={item.key} onClick={() => this.props.setHeadTitle(item.title)}>
                                <Icon type={item.icon}/>
                                <span>{item.title}</span>
                            </Link>
                        </Menu.Item>
                    ))
                } else {
                    // 查找一个与当前请求路径匹配的子Item
                    const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
                    if (cItem) {
                        this.openKey = item.key
                    }


                // 向pre 添加<SubMenu>
                    pre.push((
                        <SubMenu key={item.key} title={
                                <span>
                                    <Icon type={item.icon}/>
                                    <span>{item.title}</span>
                                </span>

                            }>
                            {this.getMenuNodes(item.children)}
                        </SubMenu>))

                }
            }
            return pre
        }, [])
    }


    componentWillMount() {
        this.menuNodes = this.getMenuNodes(menuList)
    }

    render() {
    // 得到当前请求的路由路径
        let path = this.props.location.pathname
        console.log('render()', path)
        if (path.indexOf('/product') === 0) { // 当前请求的是商品或其子路由界面
            path = '/product'
        }
        const openKey = this.openKey
        return (
            <div className="left-nav">
                <Link to='/' className="left-nav-header">
                    <img src={logo} alt="logo"/>
                    <h1>硅谷后台</h1>
                </Link>
                <Menu mode="inline" theme="dark" selectedKeys={[path]} defaultOpenKeys={[openKey]} >
                    { this.menuNodes }
                </Menu>
            </div>
        )
    }

}
/*withRouter 高阶组件: 包装非路由组件, 返回一个新的组件 新的组件向非路由组件传递 3 个属性: history/location/match */
export default connect( state => ({user: state.user}), {setHeadTitle} )(withRouter(LeftNav))